<template>
	<view class="content">
		<!-- 手机号 -->
		<view class="phoneContent" style="margin-top: 20rpx;">
			<view class="name">手机号</view>
			<input placeholder="请输入您的手机号" placeholder-class="placeholder" class="input" v-model="phone" maxlength="11" />
		</view>
		<!-- 验证码 -->
		<view class="phoneContent">
			<view class="name">验证码</view>
			<input placeholder="请输入您的短信验证码" placeholder-class="placeholder" class="input" v-model="msgCode" maxlength="8" />
		  <view class="codeContent" @tap="getCodes">{{text}}</view>
		</view>
		<!-- 新密码 -->
		<view class="phoneContent">
			<view class="name">登陆密码</view>
			<input placeholder="请输入您的登录密码" placeholder-class="placeholder" class="input" v-model="password" password maxlength="11" />
		</view>
		<!-- 确认新密码 -->
		<view class="phoneContent">
			<view class="name">确认登录密码</view>
			<input placeholder="请再次确认登录密码" placeholder-class="placeholder" class="input" v-model="posswardAgain" password maxlength="11" />
		</view>
		<!-- 确认新密码 -->
		<view class="phoneContent">
			<view class="name">身份证后六位</view>
			<input placeholder="请输入身份证后六位" placeholder-class="placeholder" class="input" v-model="idCard" maxlength="6" />
		</view>
		<view class="loginContent" :class="phone && msgCode && password && idCard && posswardAgain?'loginContentSubmit':''" @tap="sure">立即修改</view>
	</view>
</template>

<script>
	import { sendMsg,forgetPassword } from '../../api/api.js'
	export default {
		data() {
			return {
				phone:'',
				msgCode:'',
				password:'',
				posswardAgain:'',
				text:'验证码',
				idCard:''
			}
		},
		methods: {
			//获取验证码
			getCodes(){
				if( this.text != '验证码' ) {
					return false
				}
				//判断手机号是否正确
				if((/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){ 
					let data = {
						phone:this.phone,
						type:1
					}
					sendMsg(data).then(res=> {
						if ( res.code == 200 ) {
							uni.showToast({
								icon:'none',
								title:'验证码已发送，请注意查收~'
							})
							//正确-发送验证码，变化 text 文字
							var seconds = 60;
							this.text = seconds + 's后重新获取';
							let interval = setInterval(()=>{
							  if(seconds > 0){
								  seconds -- ;
								  this.text = seconds + 's后重新获取'
							  }else{
								  this.text = '验证码';
								  clearInterval(interval)
							  }
							},1000)
						}
					})
			  }else{
				  uni.showToast({
					  icon:'none',
					  title:'请输入正确的手机号~'
				  })
			  }
			},
			// 提交
			sure() {
				if( !this.phone ) {
					uni.showToast({
						icon:'none',
						title:'请输入手机号~'
					})
					return false
				}
				if( !this.password ) {
					uni.showToast({
						icon:'none',
						title:'请输入新密码~'
					})
					return false
				}
				if( !this.posswardAgain ) {
					uni.showToast({
						icon:'none',
						title:'请再次输入确认密码~'
					})
					return false
				}
				if( !this.msgCode ) {
					uni.showToast({
						icon:'none',
						title:'请输入短信验证码~'
					})
					return false
				}
				if( !this.idCard ) {
					uni.showToast({
						icon:'none',
						title:'请输入身份证后六位~'
					})
					return false
				}
				if( this.posswardAgain != this.password ) {
					uni.showToast({
						icon:'none',
						title:'两次输入的密码不一致，请重新输入'
					})
					this.posswardAgain = ''
					return false
				}
				let data = {
					phone:this.phone,
					password:this.password,
					msgCode:this.msgCode,
					idNumberSuffix:this.idCard
				}
				forgetPassword(data).then( res=> {
					if ( res.code == 200 ) {
						uni.showToast({
							icon:'none',
							title:'修改成功~'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: rgba(246, 246, 247, 1);
	}
</style>
<style lang="less">
  .content {
		display: flex;
		align-items: center;
		flex-direction: column;
		// 手机号
		.phoneContent {
			background-color: #fff;
			position: relative;
			width: 662rpx;
			padding: 28rpx 20rpx 16rpx 28rpx;
			.name {
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 36rpx;
			}
			.placeholder {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #BCBDBD;
				line-height: 26rpx;
			}
			.input {
				margin-top: 24rpx;
				height: 56rpx;
				width: 100%;
				border-bottom: 1rpx solid rgba(249, 249, 249, 1);
			}
			.codeContent {
				position: absolute;
				right: 40rpx;
				bottom: 20rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(83, 167, 0, 1);
				line-height: 37rpx;
			}
		}
		.loginContent {
			width: 670rpx;
			height: 88rpx;
			background-color: rgba(225, 225, 225, 1);
			border-radius: 45rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 60rpx;
		}
		
		.loginContentSubmit {
			background-color: rgba(83, 167, 0, 1);
		}
	}
</style>
